<!--菜单组件-->
<template>
   <el-menu :collapse="collapsed" 
            router
            @select="handleSelect"
            collapse-transition
            :default-active="$router.history.current.fullPath"
            background-color="#031529"
            style="border-right:0px;"
            text-color="#b7bcc2"
            active-text-color="#fff">
      <!--跟据菜单数据动态生成菜单，深度支持3级-->
      <template v-for="menu in menus">
          <!--判断是否有子菜单，无子菜单则直接生成菜单项-->
          <el-menu-item v-if="menu.children.length<1" :index="menu.path">
              <!-- <i style="font-size:18px;"><font-awesome-icon :icon="['far','edit']"/></i> -->
              
                <i class="fa-icon-location"><font-awesome-icon :icon="[menu.fontawesomeHead,menu.fontawesomeIcon]"/></i>
                <span slot="title">{{menu.name}}</span> 
              
          </el-menu-item>
          <!--判断是否有子菜单，有子菜单生成子菜单-->
          <el-submenu v-if="menu.children.length>0" :index="menu.path" background-color="#fff">
              <template slot="title">
                  <i class="fa-icon-location"><font-awesome-icon :icon="[menu.fontawesomeHead,menu.fontawesomeIcon]"/></i>
                  <span>{{menu.name}}</span>
              </template>
              <template v-for="menu2 in menu.children">
                  <!--判断是否有子菜单，无子菜单则直接生成菜单项-->
                  <el-menu-item v-if="menu2.children.length<1" :index="menu2.path">

                      <!-- <i class="fa-icon-location"><font-awesome-icon :icon="[menu2.fontawesomeHead,menu2.fontawesomeIcon]"/></i> -->
                      <span>{{menu2.name}}</span>
                    </el-menu-item>
                  <!--判断是否有子菜单，有子菜单生成子菜单-->
                  <el-submenu v-if="menu2.children.length>0" :index="menu2.path">
                      <template slot="title" >
                         <!-- <i class="fa-icon-location"><font-awesome-icon :icon="[menu2.fontawesomeHead,menu2.fontawesomeIcon]"/></i> -->
                    
                        <span>{{menu2.name}}</span></template>
                      <template v-for="menu3 in menu2.children">
                          <el-menu-item :index="menu3.path">
                               <!-- <i class="fa-icon-location"><font-awesome-icon :icon="[menu3.fontawesomeHead,menu3.fontawesomeIcon]"/></i> -->
                    
                              <span>{{menu3.name}}</span>
                              </el-menu-item>
                      </template>
                  </el-submenu>
              </template>
          </el-submenu>
      </template>
    </el-menu> 
</template>

<script>
//导入vuex状态
//import {getMenus} from '../../service/api';
export default {
  name: "LeftMenu",
  data() {
    return {
      menus: [],
      opened: "/index"
    };
  },
  props: ["collapsed"],
  methods: {
    getMenus() {
      //从localStorage中加载用户menu信息
      let user = JSON.parse(localStorage.getItem("user"));
      if (user) {
        this.menus = user.menus;
      }
    },
    handleSelect(key, keyPath) {
      this.opened = key;
      console.log(key, keyPath);
    }
  },
  mounted() {
    this.getMenus();
    console.log(this.getMenus, "132213123");
  }
};
</script>

<style>
ul.el-menu > li > ul > li.is-active {
  background: rgb(62, 144, 254) !important;
}
ul.el-menu > li.is-active {
  background: rgb(62, 144, 254) !important;
}
ul.el-menu > li > ul > li {
  background: rgb(1, 12, 23) !important;
}
ul.el-menu > li > ul > li .el-submenu__title {
  background: rgb(1, 12, 23) !important;
  height: 46px;
  line-height: 46px;
}

/* .el-menu-item {
    height: 46px;
    line-height: 46px;
    position: relative;
    -webkit-box-sizing: border-box;
    white-space: nowrap;
    list-style: none;
} */

/* .el-menu-vertical:not(.el-menu--collapse) {
    width: 200px;
    min-height: 400px;
  } */
.fa-icon-location {
  margin-left: 3px;
  width: 14px;
  height: 14px;
  display: inline-block;
  text-align: center;
  font-size: 14px;
  vertical-align: middle;
}
.d {
  text-align: center;
}
</style>